<template>
	<view class="edit">
		<view class="title">
			<input v-model="artObj.title" type="text" placeholder="请输入完整的标题" placeholder-class="placeholderClass">
		</view>
		<view class="content">
			<editor
				class="myEdit"
				placeholder="写点什么吧~~"
				show-img-size
				show-img-toolbar
				show-img-resize
				@ready="onEditReady"
				@focus="onFocus"
				@statuschange="onStatuschange"
			></editor>
		</view>
		<view class="btnGroup">
			<u-button type="primary" text="确认发表" :disabled="!artObj.title.length" @click="onSumbit"></u-button>
		</view>
		<view v-if="toolShow" class="tools">
			<view class="item" @click="clickHead">
				<text class="iconfont icon-zitibiaoti" :class="headShow ? 'active' : ''"></text>
			</view>
			<view class="item" @click="clickBlod">
				<text class="iconfont icon-zitijiacu" :class="boldShow ? 'active' : ''"></text>
			</view>
			<view class="item" @click="clickItalic">
				<text class="iconfont icon-zitixieti" :class="italicShow ? 'active' : ''"></text>
			</view>
			<view class="item" @click="clickDivider"><text class="iconfont icon-fengexian"></text></view>
			<view class="item" @click="clickInsertImage"><text class="iconfont icon-charutupian"></text></view>
			<view class="item" @click="editOk"><text class="iconfont icon-duigou_kuai"></text></view>
		</view>
	</view>
</template>

<script setup>
	import {onLoad} from "@dcloudio/uni-app"
	import { reactive, ref } from "vue"
	import { getImgSrc, getProvince } from '@/utils/tools.js'
	
	const db = uniCloud.database()

	const editorCtx = ref()
	const toolShow = ref(false)
	const headShow = ref(false)
	const boldShow = ref(false)
	const italicShow = ref(false)
	const artObj = reactive({
		title: '',
		content: '',
		description: '',
		picurls: '',
		province: ''
	})
	
	onLoad(() => {
		getProvince().then(res => {
			artObj.province = res
		})
	})
	
	// 离开焦点
	const onFocus = () => {
		toolShow.value = true
	}
	// 初始化
	const onEditReady = () => {
		uni.createSelectorQuery().in(this).select('.myEdit').fields({
			size: true,
			context: true
		}, (res) => {
			editorCtx.value = res.context
		}).exec()
	}
	const checkStatus = (name, detail, obj) => {
		if (detail.hasOwnProperty(name)) {
			[obj].value = true
		} else {
			[obj].value = false
		}
	}
	// 当样式发生改变的时候
	const onStatuschange = (e) => {
		let detail = e.detail
		checkStatus('header', detail, 'headShow')
		checkStatus('bold', detail, 'boldShow')
		checkStatus('italic', detail, 'italicShow')
	}
	// 添加大标题
	const clickHead = () => {
		headShow.value = !headShow.value
		editorCtx.value.format('header', headShow.value ? 'H2' : false)
	}
	// 加粗
	const clickBlod = () => {
		boldShow.value = !boldShow.value
		editorCtx.value.format('bold')
	}
	// 设置倾斜
	const clickItalic = () => {
		italicShow.value = !italicShow.value
		editorCtx.value.format('italic')
	}
	// 添加分割线
	const clickDivider = () => {
		editorCtx.value.insertDivider()
	}
	// 添加图像
	const clickInsertImage = () => {
		uni.chooseImage({
			success: async (res) => {
				uni.showLoading({
					title: '上传中请稍后',
					mask: true
				})
				for (let item of res.tempFiles) {
					let res = await uniCloud.uploadFile({
						filePath: item.path,
						cloudPath: item.name
					})
					editorCtx.value.insertImage({
						src: res.fileID
					})
				}
				uni.hideLoading()
			}
		})
	}
	// 点击工具条的确认
	const editOk = () => {
		toolShow.value = false
	}
	// 点击提交按钮
	const onSumbit = () => {
		editorCtx.value.getContents({
			success: res => {
				artObj.description = res.text.slice(0, 80)
				artObj.content = res.html
				artObj.picurls = getImgSrc(res.html)
				uni.showLoading({
					title: '发布中...'
				})
				addData()
			}
		})
	}
	// 添加数据
	const addData = () => {
		db.collection('quanzi_article').add({
			...artObj
		}).then(res => {
			uni.hideLoading()
			uni.showToast({
				title: '发布成功'
			})
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}, 800)
		})
	}
</script>

<style lang="scss" scoped>
	::v-deep .ql-blank::before {
		font-style: normal;
		color: #e0e0e0;
	}
	.edit {
		padding: 30upx;
		.title {
			input {
				font-size: 46upx;
				height: 120upx;
				border-bottom: 1upx solid #e4e4e4;
				margin-bottom: 30upx;
				color: #000;
			}
			.placeholderClass {
				color: #e0e0e0;
			}
		}
		.content {
			.myEdit {
				height: calc(100vh - 500upx);
				margin-bottom: 30upx;
			}
		}
		.tools {
			width: 100%;
			height: 80upx;
			background: #fff;
			border-top: 1upx solid #f4f4f4;
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.iconfont {
				font-size: 36upx;
				color: #333;
				&.active {
					color: #0199FE;
				}
			}
		}
	}
</style>
